<template>
	<view class="_page _p10">
		<el-card>
			<el-form ref="form" v-if="formData" :model="formData" label-width="120px">
				<el-form-item label="站点信息" :required="true" prop="site_mn">
					<n-com-select v-model="formData.site_mn" :dictList="dictSite.filter(item => !item.erpId)"
						memo="请选择站点信息" />
					<text class="_font-hint">注意：该可选项仅包含未绑定企业信息的站点</text>
				</el-form-item>
				<el-form-item label="企业信息" :required="true" prop="erp_id">
					<n-com-select v-model="formData.erp_id" :dictList="dictCompany" memo="请选择企业信息" />
					<view @click="drawer = true">
						<text class="_font-hint">注意：新添加的企业信息需要手动刷新页面</text>
						<text class="_font-hint" style="margin-left: 20px;">
							没有所在企业，点击<text style="font-size: 14px;font-weight: bold;color: #409eff;">这里</text>创建企业信息
						</text>
					</view>
				</el-form-item>
			</el-form>
			<view class="uni-button-group">
				<button style="width: 100px;" type="primary" class="uni-button"
					@click="submit">{{$t('common.button.submit')}}</button>
			</view>
		</el-card>

		<el-card>
			<view>当前企业站点绑定关系记录表
			</view>
			<view class="_font-hint">
				<view>注意：</view>
				<view>1.该页面不提供修改功能，如果有配置错误站点请联系管理员 18837132130(刘文举)</view>
				<view>2.基站名称请参照规范[基站名称][基站名称-出站口][基站名称-入站口]根据情况进行填写</view>
			</view>

			<el-table :data="dictSite" border style="width: 95%" :row-class-name="tableRowClassName">
				<el-table-column prop="name" label="站点名称" />
				<el-table-column prop="erpId" label="企业信息">
					<template #default="scope">
						{{ transformDict(scope.row.erpId) }}
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-drawer v-model="drawer" title="企业信息录入" :with-header="false" size="80%">
			<com-update dataCode="site_erp" dsId="cc3ac1352b104abfb86da5c351f8f68c"></com-update>
		</el-drawer>
	</view>
</template>

<script>
	import ToolHttp from "@/tool/http/ToolHttp.js";
	import ComUpdate from "@/pages/common/components/update/update.vue";

	export default {
		components: {
			ComUpdate
		},
		data() {
			return {
				formData: {},
				dictCompany: [],
				dictSite: [],
				drawer: false
			}
		},
		mounted() {
			ToolHttp.get("/open-api/v1/company/company").then(res => {
				this.dictCompany = res.map(item => ({
					name: item.erpName,
					val: item.id + ""
				}));
			})
			ToolHttp.get("/open-api/v1/site-common/list").then(res => {
				this.dictSite = res.map(item => ({
					name: `${item.siteName}(${item.mn})`,
					val: item.mn,
					erpId: item.erpId
				}));
			})
		},
		methods: {
			transformDict(erpId) {
				if (!erpId) {
					return "未绑定";
				}
				let erp = this.dictCompany.find(item => item.val == erpId);
				if (!erp) {
					return "未绑定";
				}
				return erp.name;
			},
			tableRowClassName({
				row
			}) {
				if (row.erpId) {
					return 'success-row';
				}
				return 'warning-row';
			},
			submit() {
				ToolHttp.post("http://121.40.237.31:38121/open-api/v1/site-common/update", this.formData).then(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style>
	::v-deep .el-table .warning-row {
		color: red;
		--el-table-tr-bg-color: var(--el-color-warning-light-9);
	}

	::v-deep .el-table .success-row {
		color: green;
		--el-table-tr-bg-color: var(--el-color-success-light-9);
	}
</style>
